<template>
  <div class="header-wrapper">
    <div v-if="!dialogVisible" class="tableWrapper">
      <div class="text_wrapper_left">
        <img src="../assets/img/module5/alert/alert_left_icon.png" alt="logo" class="alert_icon" />
        <span class="text_alert">空域告警日志</span>
        <img src="../assets/img/module5/alert/alert_stripe.png" alt="logo" class="alert_stripe" />
      </div>
      <!-- 操作栏：排序方式、搜索框、查询按钮、刷新按钮 -->
      <div class="table-actions">
        <div class="left-actions">
          <span class="text_action_left">空域</span>
          <select v-model="selectedArea">
            <option class="selectOptionLeft" value="">全部</option>
            <option class="selectOptionLeft" value="起降">起降区</option>
            <option class="selectOptionLeft" value="航路">航路</option>
            <option class="selectOptionLeft" value="作业">作业区</option>
          </select>
        </div>

        <div class="middle-actions">
          <span class="text_action_middle">时间段</span>
          <div class="time_block">
            <!-- <el-date-picker v-model="selectTime" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期"
              value-format="yyyy-MM-dd">
            </el-date-picker> -->
            <!-- 时间段选择 -->
            <!-- <el-date-picker v-model="selectTime" type="date" placeholder="选择日期" value-format="yyyy-MM-dd">
            </el-date-picker>

            <select v-model="selectedMin">
              <option class="selectOption" value="00:00">{{this.selectMin}}</option>
              <option class="selectOption" value="00:15">{{ this.selectMin }}</option>
              <option class="selectOption" value="00:30">{{ this.selectMin }}</option>
              <option class="selectOption" value="00:45">{{ this.selectMin }}</option>
            </select> -->

            <el-date-picker v-model="selectTime" type="datetime" placeholder="选择日期时间" value-format="yyyy-MM-ddTHH:mm:ss"
              popper-class="selectDown" @change="handleShowTime" @blur="handleTimeBlur" :format="showTime"
              @focus="handleTimeVisibleChange" background="transparent">
            </el-date-picker>

          </div>
        </div>

        <div class="right-actions">
          <span class="text_action_right">告警等级</span>
          <select v-model="selectedAlarm">
            <option class="selectOptionRight" value="">全部</option>
            <option class="selectOptionRight" value=1>告警等级1</option>
            <option class="selectOptionRight" value=2>告警等级2</option>
            <option class="selectOptionRight" value=3>告警等级3</option>
            <option class="selectOptionRight" value=4>告警等级4</option>
            <option class="selectOptionRight" value=5>告警等级5</option>
          </select>
        </div>

        <!-- 刷新按钮 -->
        <div class="alert_button">
          <button class="resetButton" @click="reset">重置</button>
          <button class="queryButton" @click="query">查询</button>
        </div>
      </div>

      <div class="alertTableWapper">
        <!-- 表格组件 -->
        <el-table :data="tableDataModule5" style="width: 100%; height: 100%; max-width:calc(58vw);" :max-height="tableMaxHeight">
          <!-- 动态渲染列 -->
          <!-- auto-width -->
          <!-- <el-table-column v-for="column in tableColumnsModule5" :key="column.prop" :prop="column.prop"
            :label="column.label" auto-width>
          </el-table-column> -->
          <!-- 固定列间距 -->
          <el-table-column v-for="column in tableColumnsModule5" :key="column.prop" :prop="column.prop"
            :label="column.label" :min-width="column.width" align="center">
          </el-table-column>
          <!-- 操作栏 -->
          <!-- <el-table-column label="操作" style="padding-left:16px;">
            <template #default="scope">
              <button @click="handleView(scope.row)" class="viewButtonModule5" style="padding-left: 0px;">查看</button>
            </template>
</el-table-column> -->
        </el-table>

        <!-- 分页组件 -->
        <div class="alertPagenation">
          <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="pageCurrent" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper" :total="tableTotalData">
          </el-pagination>
        </div>
      </div>

    </div>

    <!-- 查看弹窗的显示 -->
    <customDialog v-else :visible.sync="dialogVisible" :title="selectedTitle" :dialogData="selectedRow" />

    <!-- 右侧组件 -->
    <div class="analysis-wrapper">
      <!-- 告警标题栏 -->
      <div class="text_wrapper_right">
        <img src="../assets/img/module5/alert/alert_left_icon.png" alt="logo" class="alert_icon_right" />
        <span class="text_right">告警分析</span>
        <img src="../assets/img/module5/alert/alert_stripe.png" alt="logo" class="alert_stripe" />
      </div>

      <!-- 饼图 -->
      <!-- <div class="pie_chart_wrapper">
        <VueEcharts class="chart" :option="option" autoresize />
      </div> -->

      <div id="pieChart" :style="{ width: '100%', height: '35%' }"></div>

      <!-- 统计数据柱状显示 -->
      <div class="counterBar_wrapper">
        <CustomModule5CounterBar v-for="areaName in alertPairList" :key="areaName.airspaceNumber"
          :_areaName="areaName.airspaceNumber" :_alertNumber="areaName.alarmNum"
          :_percentage="getpercentage(areaName.alarmNum, barTotal)"></CustomModule5CounterBar>
      </div>

    </div>


  </div>
</template>

<script>

import axios from 'axios';
import CustomModule5CounterBar from '../components/CustomModule5CounterBar.vue';
import customDialog from '../components/CustiomDialogModule5.vue';

import * as echarts from 'echarts';


export default {
  name: "Module5AlertResults",
  components: {
    CustomModule5CounterBar,
    customDialog,
    //DatePicker,
    //tinyDatePicker,
  },
  data() {
    return {
      selectedArea: '', // 默认所有区域
      selectedAlarm: '', // 默认所有告警
      subLevel:'',//用于柱状图的显示
      selectTime: "",  //v-model绑定的时间参数
      queryTime:"",//实际用于查询的时间参数
      showTime:"",
      calMinTime: 0, //判断所选时间的时间段
      calSecTime:0, 
      //hours: Array.from({ length: 24 }, (_, i) => String(i).padStart(2, '0')),
      startTime: "",
      endTime: "",


      chart: null,
      showTotal: true, //控制饼图中心总数的显示
      //默认时饼图显示总告警数的字体格式
      chartTitleConfig: {
        text: '',
        x: 'center',
        y: 'center',
        textStyle: {
          rich: {
            name: {
              fontSize: 40, // 上面一行的字体大小
              //fontWeight: 'bold', // 上面一行的字体加粗
              lineHeight: 35, // 行高
              color: '#ffffff', // 上面一行的颜色
              fontFamily: 'AlibabaPuHuiTi_2_55_Regular',

            },
            value: {
              fontSize: 16, // 下面一行的字体大小
              lineHeight: 20, // 行高
              color: '#ffffff', // 下面一行的颜色
              fontFamily: 'AlibabaPuHuiTi_2_55_Regular',
            }
          },

        },
      },
      //控制各部分数据的显示
      chartPartConfig: {
        text: '',
        x: 'center',
        y: 'center',
        textStyle: {
          rich: {
            name: {
              fontSize: 40, // 上面一行的字体大小
              //fontWeight: 'bold', // 上面一行的字体加粗
              lineHeight: 35, // 行高
              color: '#ffffff', // 上面一行的颜色
              fontFamily: 'AlibabaPuHuiTi_2_55_Regular',

            },
            value: {
              fontSize: 16, // 下面一行的字体大小
              lineHeight: 20, // 行高
              color: '#ffffff', // 下面一行的颜色
              fontFamily: 'AlibabaPuHuiTi_2_55_Regular',
            }
          },

        },
      },

      tableMaxHeight: 700, // 默认值
      //表格相关数据
      tableDataModule5: [],  // 表格数据从服务器获取
      tableColumnsModule5: [   //表格列自定义
        { prop: 'id', label: '序号', width:'5%'},
        { prop: 'airspaceNumber', label: '空域对象名称', width: '15%' },
        { prop: 'alertTime', label: '告警时段', width: '23%' },
        { prop: 'alertLevel', label: '告警等级', width: '10%' },
        { prop: 'airspaceFlow', label: '无人机数量(架)', width: '10%' },
        { prop: 'airspaceCapacity', label: '静态容量(架)', width: '10%' },
        { prop: 'dynamicFlow', label: '空域流量(架/15min)', width: '15%' },
        { prop: 'dynamicCapacity', label: '动态容量(架/15min)', width: '15%' },
      ],
      dialogVisible: false, // 控制弹窗显示状态
      //dialogVisible: true, // 控制弹窗显示状态
      selectedRow: null, // 当前选中的行数据
      pageCurrent: 1, // 当前页
      pages: 1,  //z总页数
      pageSize: 10, // 每页显示条数
      tableTotalData: 100, // 表格显示总条数  

      //右侧结果展示数据相关
      alarm1Num: 0,
      alarm2Num: 0,
      alarm3Num: 0,
      alarm4Num: 0,
      alarm5Num: 0,
      totalAlert: 0,
      barTotal: 0,
      alarmList: [0, 0, 0, 0, 0],
      alertPairList: [],
      alarmLevels: ['Ⅰ级告警', 'Ⅱ级告警', 'Ⅲ级告警', 'Ⅳ级告警', 'Ⅴ级告警'],
      alarmColors: ['#1eff6a', '#00f7ff', '#0098ff', '#ffac1b', '#ff3d3d'],

      chartData: [],

    };
  },

  created() {
    console.log('cerated函数加载完成');
  },

  methods: {
    // 查询获取表格数据
    async fetchTableData(area, starttime, endtime, level, pagecurrent, pagesize) {
      try {

        //const tableResponse = await axios.post('http://127.0.0.1:4523/m2/5137928-4801695-default/214530974', {  
        const tableResponse = await axios.post('http://47.99.75.194:8084/api/alarm-information/page', {
          airspaceNumber: area,
          startTime: starttime,
          endTime: endtime,
          alertLevel: level,
        },
          {
            params: { pageNum: pagecurrent, pageSize: pagesize },
          },
        );
        //const tableResponse = await axios.post('http://127.0.0.1:4523/m2/5137928-4801695-default/214481629');

        this.tableDataModule5 = tableResponse.data.data.pageData;
        //为容量和流量添加单位
        for(let i=0;i<this.tableDataModule5.length;i++){
          this.tableDataModule5[i].id = i+1;
          this.tableDataModule5[i].alertTime = this.handleTableShowTime(this.tableDataModule5[i].alertTime) ;
          this.tableDataModule5[i].alertLevel = this.handleShowLevel(this.tableDataModule5[i].alertLevel);
          // if(this.tableDataModule5[i].airspaceType == 1 || this.tableDataModule5[i].airspaceType == 3){
          //   this.tableDataModule5[i].airspaceFlow = this.tableDataModule5[i].airspaceFlow + "架/15min";
          //   this.tableDataModule5[i].airspaceCapacity = this.tableDataModule5[i].airspaceCapacity + "架";
          // }else{
          //   this.tableDataModule5[i].dynamicFlow = this.tableDataModule5[i].dynamicFlow + "架/15min";
          //   this.tableDataModule5[i].dynamicCapacity = this.tableDataModule5[i].dynamicCapacity + "架";
          // }
          }

        this.tableTotalData = tableResponse.data.data.total;  //获取总的条数
        this.pages = tableResponse.data.data.pages;
        //console.log("Module5表格接口返回的数据", this.tableDataModule5[0].airspaceType);
        //console.log("表格数据tableDataModule5", this.tableDataModule5);

      } catch (error) {
        console.error('Error fetching module5 table data:', error);
      }
    },

    // 获取右侧统计分析数据，并展示  用于图标的展示
    async fetchChartAnalysisData(area, starttime, endtime, level) {
      try {
        //const analysisResponse = await axios.post('http://127.0.0.1:4523/m2/5137928-4801695-default/214530974');
        const analysisResponse = await axios.post('http://47.99.75.194:8084/api/alarm-information/analysis', {
          airspaceNumber: area,
          startTime: starttime,
          endTime: endtime,
          alertLevel: level,
        },
        );

        this.alarmList[0] = analysisResponse.data.data.alarm1Num;
        this.alarmList[1] = analysisResponse.data.data.alarm2Num;
        this.alarmList[2] = analysisResponse.data.data.alarm3Num;
        this.alarmList[3] = analysisResponse.data.data.alarm4Num;
        this.alarmList[4] = analysisResponse.data.data.alarm5Num;
        console.log("alarmlist", this.alarmList);

        // 清空 chartData，以防止重复数据
        this.chartData = [];
        for (let i = 0; i < 5; i++) {
          if (this.alarmList[i] != 0) {
            this.chartData.push({
              value: this.alarmList[i],
              name: this.alarmLevels[i],
              itemStyle: {
                color: this.alarmColors[i],
              }
            });

          }
        }
        console.log("chartData", this.chartData);

        this.totalAlert = analysisResponse.data.data.total;
        //this.totalAlert = this.alarmList[1] + this.alarmList[2] + this.alarmList[3] + this.alarmList[4];
        this.barTotal = this.totalAlert;
        this.chartTitleConfig.text = `{name|${this.totalAlert}}\n{value|总告警数}`;
        this.alertPairList = analysisResponse.data.data.pairList;

        console.log("Module5右侧告警数据展示结果返回成功", analysisResponse)

        this.setChartOption(this.chart);//刷新图表
      } catch (error2) {
        console.error('Error fetching module5 analysis data:', error2);
      }
    },

    //获取柱状图的显示数据
    //传入的level代表左边表格中查询的告警等级，levelDisplay代表柱状图要显示的告警等级
    async fetchBarData(area, starttime, endtime, level, sublevel) {
      try {
        //const analysisResponse = await axios.post('http://127.0.0.1:4523/m2/5137928-4801695-default/214530974');

        const barAnalysisResponse = await axios.post('http://47.99.75.194:8084/api/alarm-information/analysisDuplicate', {
          airspaceNumber: area,
          startTime: starttime,
          endTime: endtime,
          alertLevel: sublevel,
        },
        );
        if (sublevel == 1) {
          console.log("区域安全！");
          //置空
          this.alertPairList = [];
          this.barTotal = 0;
        } else {
          this.alertPairList = barAnalysisResponse.data.data.pairList;   //获取待显示的告警对
          this.barTotal = barAnalysisResponse.data.data.total;
          console.log('告警柱状图数据获取成功，获取的告警等级为', sublevel);
        }
      } catch (error3) {
        console.error('告警柱状图数据获取出错', error3);
      }
    },




    //表格大小自适应
    handleSizeChange(newSize) {
      this.pageSize = newSize;
      this.pageCurrent = 1;
      this.fetchTableData(this.selectedArea, this.startTime, this.endTime, this.selectedAlarm, this.pageCurrent, this.pageSize); // 当页大小改变时重新获取数据
    },
    handleCurrentChange(newPage) {
      this.pageCurrent = newPage;
      this.fetchTableData(this.selectedArea, this.startTime, this.endTime, this.selectedAlarm, this.pageCurrent, this.pageSize); // 当当前页改变时重新获取数据
    },
    handleView(row) {
      this.selectedRow = row;
      console.log("选择的用户的行", this.selectedRow);
      this.selectedTitle = row.applicationId;
      console.log("selectedTitle", this.selectedTitle);
      this.dialogVisible = true;
    },

    //处理获取的实时时间 格式为：2024-09-19T14:18:35
    getCurrentDateTime() {
      const now = new Date();
      const year = now.getFullYear();
      const month = String(now.getMonth() + 1).padStart(2, '0');
      const day = String(now.getDate()).padStart(2, '0');
      const hour = String(now.getHours()).padStart(2, '0');
      const minute = String(now.getMinutes()).padStart(2, '0');
      const second = String(now.getSeconds()).padStart(2, '0');

      // 返回格式化的时间字符串
      return `${year}-${month}-${day}T${hour}:${minute}:${second}`;
    },

    handleShowTime(time){
      //console.log("!!!!!!!!!!!!!", time); //2024-09-19T14:18:35
      //this.showTime="yyyyy-MM-dd HH:mm:ss";
      this.calMinTime = parseInt(time.slice(14, 16), 10);
      //this.calSecTime = parseInt(time.slice(17, 19), 10);
      // console.log("SelectTime", this.selectTime);
      // console.log("SecTime", this.calSecTime);
      if(this.calMinTime >= 0 && this.calMinTime < 15 ){
        //用于页面的显示
        this.showTime = time.slice(0, 10);
        this.showTime = this.showTime + " "+ time.slice(11, 13)+ ":00-" + time.slice(11, 13)+ ":15";
      }else if(this.calMinTime >= 15 && this.calMinTime < 30){
        this.showTime = time.slice(0, 10);
        this.showTime = this.showTime + " " + time.slice(11, 13) + ":15-" + time.slice(11, 13) + ":30";

      }else if(this.calMinTime >= 30 && this.calMinTime < 45){
        this.showTime = time.slice(0, 10);
        this.showTime = this.showTime + " " + time.slice(11, 13) + ":30-" + time.slice(11, 13) + ":45";

      }else if(this.calMinTime >= 45 && this.calMinTime < 60){
        this.showTime = time.slice(0, 10);
        const calHour = parseInt(time.slice(11, 13)) + 1;
        const nextHourStr = calHour < 10 ? `0${calHour}` : `${calHour}`;
        this.showTime = this.showTime + " " + time.slice(11, 13) + ":45-" + nextHourStr + ":00";
      }
      
    },

    //表格中的数据id重排序，告警时间点改为时段的形式
    handleTableShowTime(time) {
      //console.log("!!!!!!!!!!!!!", time); //2024-09-19T14:18:35
      //this.showTime="yyyyy-MM-dd HH:mm:ss";
      const MinTime = parseInt(time.slice(14, 16), 10);
      //this.calSecTime = parseInt(time.slice(17, 19), 10);
      // console.log("SelectTime", this.selectTime);
      // console.log("SecTime", this.calSecTime);
      if (MinTime >= 0 && MinTime < 15) {
        //用于页面的显示
        let showTime = time.slice(0, 10);
        return showTime + " " + time.slice(11, 13) + ":00-" + time.slice(11, 13) + ":15";
      } else if (MinTime >= 15 && MinTime < 30) {
        let showTime = time.slice(0, 10);
        return showTime = showTime + " " + time.slice(11, 13) + ":15-" + time.slice(11, 13) + ":30";

      } else if (this.calMinTime >= 30 && this.calMinTime < 45) {
        let showTime = time.slice(0, 10);
        return showTime = showTime + " " + time.slice(11, 13) + ":30-" + time.slice(11, 13) + ":45";

      } else if (this.calMinTime >= 45 && this.calMinTime < 60) {
        let showTime = time.slice(0, 10);
        const calHour = parseInt(time.slice(11, 13)) + 1;
        const nextHourStr = calHour < 10 ? `0${calHour}` : `${calHour}`;
        return showTime = showTime + " " + time.slice(11, 13) + ":45-" + nextHourStr + ":00";
      }

    },

    //更改告警等级的显示，改为罗马数字
    handleShowLevel(level){
      if(level==1){
        return "Ⅰ";
      }else if(level == 2){
        return "Ⅱ";
      }else if(level == 3){
        return "Ⅲ"
      } else if (level == 4) {
        return "Ⅳ"
      } else if (level == 5) {
        return "Ⅴ"
      }
    },

    //选择的时候，显示时间点的选择，等到选完了才显示片段
    handleTimeVisibleChange(change){
      //console.log("handleTimeVisibleChange");
      this.showTime = "yyyy-MM-dd HH:mm:ss";
    },

    handleTimeBlur(){
      //console.log("handleTimeBlur");
      this.handleShowTime(this.selectTime);  
    },

    //用于后端查询的时间处理函数
    handleQueryTime(time){
      this.calMinTime = parseInt(time.slice(14, 16), 10);
      if (this.calMinTime >= 0 && this.calMinTime < 15) {
        //用于后端的查询信息
        this.startTime = time.slice(0, 13) + ":00:00";
        this.endTime = time.slice(0, 13) + ":14:59";
        console.log("startTime", this.startTime);
        console.log("endTime", this.endTime);
      } else if (this.calMinTime >= 15 && this.calMinTime < 30) {
        //用于后端的查询信息
        this.startTime = time.slice(0, 13) + ":15:00";
        this.endTime = time.slice(0, 13) + ":29:59";
        console.log("startTime", this.startTime);
        console.log("endTime", this.endTime);
      } else if (this.calMinTime >= 30 && this.calMinTime < 45) {
        //用于后端的查询信息
        this.startTime = time.slice(0, 13) + ":30:00";
        this.endTime = time.slice(0, 13) + ":44:59";
        console.log("startTime", this.startTime);
        console.log("endTime", this.endTime);

      } else if (this.calMinTime >= 45 && this.calMinTime < 60) {
        //用于后端的查询信息
        this.startTime = time.slice(0, 13) + ":45:00";
        this.endTime = time.slice(0, 13) + ":59:59";
        console.log("startTime", this.startTime);
        console.log("endTime", this.endTime);
      }
    },


    //按钮点击对应的方法
    reset: function () {
      this.selectedArea = "";
      this.selectedAlarm = "";
      //selectedTime置空，用于界面显示
      this.selectTime = this.getCurrentDateTime();
      this.handleShowTime(this.selectTime);
      this.handleQueryTime(this.selectTime);
      // this.startTime = "";
      // this.endTime = "";
      this.pageCurrent = 1;
      this.pageSize = 10;
      this.fetchTableData(this.selectedArea, this.startTime, this.endTime, this.selectedAlarm, this.pageCurrent, this.pageSize);
      this.fetchChartAnalysisData(this.selectedArea, this.startTime, this.endTime, this.selectedAlarm);

      console.log("时间日期选择", this.selectTime);
    },

    query: function () {
      this.pageCurrent = 1;
      //上一版本 时间查询
      // if (this.selectTime == null) {
      //   this.selectTime = "";
      // }

      // if (this.selectTime == "") {
      //   console.log("查询全部时间的信息");
      //   this.startTime = "";
      //   this.endTime = "";
      //   this.fetchTableData(this.selectedArea, this.startTime, this.endTime, this.selectedAlarm, this.pageCurrent, this.pageSize);
      //   this.fetchChartAnalysisData(this.selectedArea, this.startTime, this.endTime, this.selectedAlarm);
      // }
      // else {
      //   this.queryTime[0] = this.selectTime[0] + "T00:00:00";
      //   this.queryTime[1] = this.selectTime[1] + "T23:59:59";
      //   console.log("查询全部时间的信息", this.queryTime);
      //   this.fetchTableData(this.selectedArea, this.queryTime[0], this.queryTime[1], this.selectedAlarm, this.pageCurrent, this.pageSize);
      //   this.fetchChartAnalysisData(this.selectedArea, this.startTime, this.endTime, this.selectedAlarm);
      // }

      //新版本需求时间查询
      this.queryTime = this.selectTime;
      this.handleQueryTime(this.queryTime);
      this.fetchTableData(this.selectedArea, this.startTime, this.endTime, this.selectedAlarm, this.pageCurrent, this.pageSize);
      this.fetchChartAnalysisData(this.selectedArea, this.startTime, this.endTime, this.selectedAlarm);

      this.setChartOption(this.chart);
    },

    getpercentage(count, count_total) {
      return (count / count_total)
    },

    chartInit() {
      this.chart = echarts.init(document.getElementById('pieChart'));
      window.addEventListener('resize', () => { this.chart.resize(); });
      this.chart.on('click', (params) => {
        console.log(params);
        if (params.componentType === 'graphic') {
          console.log("获取全部数据的告警柱状图");
          this.subLevel = '';
          this.fetchBarData(this.selectedArea, this.startTime, this.endTime, this.selectedAlarm, this.subLevel);
        } else {
          if (params.data.name == this.alarmLevels[0]) {
            this.subLevel = 1;
          } else if (params.data.name == this.alarmLevels[1]) {
            this.subLevel = 2;
          } else if (params.data.name == this.alarmLevels[2]) {
            this.subLevel = 3;
          } else if (params.data.name == this.alarmLevels[3]) {
            this.subLevel = 4;
          } else if (params.data.name == this.alarmLevels[4]) {
            this.subLevel = 5;
          }
          this.fetchBarData(this.selectedArea, this.startTime, this.endTime, this.selectedAlarm, this.subLevel);
        }
      });

      // 监听鼠标悬浮事件
      this.chart.on('mouseover', (params) => {
        //console.log(params);
        if (params.componentType == 'graphic') { //componentType: 'graphic'//停在饼图的圈外
          this.showTotal = true;
          this.chart.setOption({
            title: this.chartTitleConfig,
          });
          //console.log("显示饼图总数");

        } else if (params.componentType == 'series') { //componentType: 'series'  //停在饼图的圈上
          this.showTotal = false;
          //console.log("显示对应危险信息的数目");
          this.chartPartConfig.text = `{name|${params.data.value}}\n{value|${params.data.name}}`;
          this.chart.setOption({
            title: this.chartPartConfig,
          });

          this.chart.on('mouseout', () => {
            //console.log("鼠标移出");
            this.showTotal = true;
            this.chart.setOption({
              title: this.chartTitleConfig,
            });
          });


        }
      });
    },

    //饼图相关设置
    setChartOption(chart) {
      // let chartDom = document.getElementById('pieChart');
      // let chart = echarts.init(chartDom);
      // let chart = echarts.init(document.getElementById('pieChart'));
      // window.addEventListener('resize', () => { chart.resize(); });
      chart.setOption({
        title: this.chartTitleConfig,
        series: [
          //外部标签显式
          {
            name: 'pie_out',  //系列的名称，将在 tooltip 中显示。
            type: 'pie',  // 图表的类型为饼图（pie）
            radius: ['45%', '60%'],  //: 定义饼图的半径。['40%', '70%'] 表示这是一个环形饼图，内半径为 40%，外半径为 70%。因此，形成了一个环形。
            avoidLabelOverlap: false,  //是否启用防止标签重叠策略。设置为 false 表示不启用这个策略，标签可能会重叠。
            padAngle: 5,
            // itemStyle: {
            //   borderRadius: 10, //边角圆角半径为 10 像素
            // },
            label: {  //配置标签的显示样式。
              show: true,  // 标签默认显示。
              position: 'outside',  //标签的位置设置为中心（但由于 show 是 false，它不会显示）。
              formatter: (params) => {
                return `{name|${params.name}}\n{value|${params.value}}`;
              },

              rich: {
                name: {
                  fontSize: 12, // 上面一行的字体大小
                  //fontWeight: 'bold', // 上面一行的字体加粗
                  lineHeight: 15, // 行高
                  color: '#ffffff', // 上面一行的颜色
                  fontFamily: 'AlibabaPuHuiTi_2_55_Regular',
                },
                value: {
                  fontSize: 12, // 下面一行的字体大小
                  lineHeight: 15, // 行高
                  color: '#ffffff', // 下面一行的颜色
                  fontFamily: 'AlibabaPuHuiTi_2_55_Regular',
                  align: "center",
                }
              },
            },
            emphasis: {  //用于配置高亮状态的样式（当鼠标悬浮到某一项时）。
              label: {  //在高亮状态下，标签的显示样式。
                show: true,  //鼠标悬浮时显示标签。
              },
              scaleSize: 10,
            },

            labelLine: {
              show: true, // 显示引线

              //alignTo: 'edge',
              length: 20, // 第一段引线的长度
              length2: 0, // 第二段引线的长度
              smooth: true, // 引线平滑
              edgeDistance: 10,
            },

            labelLayout: function (params) {
              const isLeft = params.labelRect.x < chart.getWidth() / 2;
              const points = params.labelLinePoints;
              // Update the end point.
              points[2][0] = isLeft
                ? params.labelRect.x
                : params.labelRect.x + params.labelRect.width;
              return {
                labelLinePoints: points,
              };
            },
            data: this.chartData,
          },
        ],

        graphic: [
          //中心告警图片
          {
            type: 'image',
            id: 'background-image',
            left: 'center',
            top: 'center',
            z: 0,  // 设置图层级别，将背景图置于饼图下层
            bounding: 'raw',
            style: {
              image: require('@/assets/img/module5/alert/chart_alert_icon.png'), // 替换为你的背景图路径
              width: 80,  // 设置背景图宽度
              height: 80,  // 设置背景图高度
            }
          },
          //外层圆环
          {
            type: 'image',
            id: 'background-image-2',
            left: 'center',
            top: 'center',
            z: 1,  // 设置图层级别，将第二个背景图置于第一个背景图下层
            style: {
              image: require('@/assets/img/module5/alert/chart_out_icon.png'),  // 替换为你的背景图路径
              width: 185,  // 设置背景图宽度
              height: 185,  // 设置背景图高度
            },
          },
          //中层圆环
          {
            type: 'image',
            id: 'background-image-3',
            left: 'center',
            top: 'center',
            z: 2,  // 设置图层级别，将第二个背景图置于第一个背景图下层
            style: {
              image: require('@/assets/img/module5/alert/chart_middle_icon.png'),  // 替换为你的背景图路径
              width: 165,  // 设置背景图宽度
              height: 165,  // 设置背景图高度
            },
          },
          //内层圆环
          {
            type: 'image',
            id: 'background-image-4',
            left: 'center',
            top: 'center',
            z: 2,  // 设置图层级别，将第二个背景图置于第一个背景图下层
            style: {
              image: require('@/assets/img/module5/alert/chart_inner_icon.png'),  // 替换为你的背景图路径
              width: 130,  // 设置背景图宽度
              height: 130,  // 设置背景图高度
            },
          },
        ],

      },)
    },

    //图表的销毁
    beforeDestroy() {
      if (!this.chart) {
        return;
      }
      // 销毁图表实例以防止内存泄漏
      this.chart.dispose();
      this.chart = null;
    },


  },

  mounted() {
    this.chartInit();
    this.selectTime = this.getCurrentDateTime();
    this.selectTime = "2024-08-12T09:31:18";
    this.handleShowTime(this.selectTime);
    //this.handleShowTime(this.selectTime);
    this.queryTime = this.selectTime;
    this.handleQueryTime(this.queryTime);
    //初始化时获取全部表格数据
    this.fetchTableData(this.selectedArea, this.startTime, this.endTime, this.selectedAlarm, this.pageCurrent, this.pageSize);
    this.fetchChartAnalysisData(this.selectedArea, this.startTime, this.endTime, this.selectedAlarm).then(() => {
      this.setChartOption(this.chart);
    });
    //}
    this.tableMaxHeight = window.innerHeight * 0.65;


  },

  computed: {

  },


};
</script>


<style lang="scss" scoped>
@import "../assets/demo/index.scss";
</style>
<style scoped>
h3 {
  color: #ffffff;
  text-align: left;
}

p {
  color: #ffffff;
}

.header-wrapper {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;
  gap: 1%;
}

.tableWrapper {
  display: flex;
  /* 使用 Flexbox 布局 */
  flex-direction: column;
  /* 子组件竖向排列 */
  padding-left: 1.5%;
  padding-right: 1%;
  width: 75%;
  /* 设置容器宽度 */
  height: 100%;
  /*gap: 2.5%;  可选：子组件之间的间距 */

}


.text_wrapper_left {
  /*告警日志 背景样式*/
  height: 5%;
  width: 100%;
  position: relative;
  /*元素的定位方式为相对定位，这允许元素相对于其正常位置进行偏移。*/
  display: flex;
  /*弹性盒子*/
  align-items: center;
  /*弹性盒子容器中，垂直居中对齐子元素。*/
  justify-content: flex-start;
  padding-left: 2%;
  /*元素左侧内边距为 2%，增加左侧的空间。*/
  gap: 0;
  /*弹性盒子容器内的子元素之间设置 2% 的间距。*/

  background-image: url("@/assets/img/module5/alert/alert_title_bar.png");
  background-repeat: no-repeat;
  /*背景图像不会重复显示。*/
  background-position: 0% 50%;
  /* 背景图像在容器中的水平位置为最左边 (0%)，垂直位置为中间 (50%)。*/
}


.text_wrapper_right {
  /*告警日志 背景样式*/

  height: 5%;
  width: 95%;
  position: relative;
  /*元素的定位方式为相对定位，这允许元素相对于其正常位置进行偏移。*/
  display: flex;
  /*弹性盒子*/
  flex-direction: row;
  align-items: center;
  /*弹性盒子容器中，垂直居中对齐子元素。*/
  justify-content: flex-start;
  padding-left: 2%;
  /*元素左侧内边距为 2%，增加左侧的空间。*/
  gap: 6%;
  /*弹性盒子容器内的子元素之间设置 2% 的间距。*/

  background-image: url("@/assets/img/module5/alert/alert_title_bar.png");
  /*background-size: contain;  * /*背景图像将按比例缩放以适应容器大小，同时保持原始宽高比。*/
  background-repeat: no-repeat;
  /*背景图像不会重复显示。*/
  background-position: 0% 50%;
  /* 背景图像在容器中的水平位置为最左边 (0%)，垂直位置为中间 (50%)。*/
}

.alert_icon {
  width: 3%;
}

.alert_icon_right {
  width: 7%;
  padding-left: 2%
}

.text_alert {
  /* 左侧告警日志文本样式 */
  color: rgba(255, 255, 255, 1);
  font-size: 16px;
  font-family: AlibabaPuHuiTi_2_65_Medium;
  text-align: center;
  padding-left: 2%;
}


.alert_stripe {
  display: flex;
  position: absolute;
  right: 1%;
}


.table-actions {
  /* 操作框整体设置 */
  display: flex;
  height: 5%;
  align-items: center;
  /* 主轴上均匀分布
  justify-content: space-between;*/
  /* 统一的高度 */
  margin-bottom: 0.1%;
  margin-top: 1%;
  gap: 0%;
}

.text_action_left {
  color: rgba(255, 255, 255, 1);
  font-size: 14px;
  font-family: AlibabaPuHuiTi_2_55_Regular;
  text-align: center;
  width: 30%;
  justify-content: flex-start;
}

.text_action_middle {
  color: rgba(255, 255, 255, 1);
  font-size: 14px;
  font-family: AlibabaPuHuiTi_2_55_Regular;
  text-align: center;
  width: 25%;
  justify-content: flex-start;
}

.text_action_right {
  color: rgba(255, 255, 255, 1);
  font-size: 14px;
  font-family: AlibabaPuHuiTi_2_55_Regular;
  text-align: center;
  width: 30%;
  justify-content: flex-start;
}

/* 左侧操作栏 */
.left-actions {
  display: flex;
  align-items: center;
  width: 20%;
  height: 100%;
  gap: 1%;
  /* 设置各个元素之间的间距 */
}

/* 中间操作栏 */
.middle-actions {
  display: flex;
  width: 30%;
  height: 100%;
  align-items: center;
  gap: 0%;
  /* 设置各个元素之间的间距 */
}

/* 右侧操作栏 */
.right-actions {
  display: flex;
  width: 30%;
  height: 100%;
  align-items: center;
  gap: 1%;
  /* 设置各个元素之间的间距 */
}

.time_block {
  display: flex;
  align-items: center;
  height: 100%;
}


.table_left {
  margin-top: 1%;
}



/* 排序选择器 */
select {
  border: none;
  color: #ffffff;
  padding: 0.5% 1%;
  border-radius: 4px;
  width: 80%;
  height: 80%;
  padding-left: 0px;
  background: transparent;
  background-image: url("@/assets/img/module5/alert/alert_label.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;

  overflow: hidden;
  /* 隐藏溢出内容 */
  -ms-overflow-style: none;
  /* Internet Explorer 10+ */
  scrollbar-width: none;
  /* Firefox */
}


.selectOptionLeft {
  color: #ffffff;
  
  background-color: #2e4151;
  /* 自定义选项背景颜色 */


}
.selectOptionRight {
  color: #ffffff;

  background-color: #2e4151;
  /* 自定义选项背景颜色 */


}

select::-webkit-scrollbar {
  display: none;
  /* Chrome, Safari 和 Opera 中隐藏滚动条 */
}




.alert_button {
  display: flex;
  align-items: center;
  width: 30%;
  height: 100%;
  padding-left: 2%;
  gap: 10%;
}

/* 重置按钮 */
.resetButton {
  color: #000000;
  width: 35%;
  padding: 5px 15px;
  cursor: pointer;
  border-radius: 4px;
  height: 90%;
  background-image: url("@/assets/img/module5/alert/button_white.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  line-height: 100%;
  text-align: center;
}


/* 查询按钮 */
.queryButton {
  color: #ffffff;
  width: 35%;
  padding: 5px 15px;
  cursor: pointer;
  border-radius: 4px;
  height: 90%;
  background-image: url("@/assets/img/module5/alert/button_blue.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  line-height: 100%;
  text-align: center;
}

/*右侧组件样式*/
.analysis-wrapper {
  padding-right: 1.5%;
  width: 25%;
  height: 100%;
  padding-left: 1%;
  padding-top: 1%;
}

.pie_chart_wrapper {
  height: 35%;
  width: 100%;
}

.chart {
  width: 100%;
  height: 100%;
}

.counterBar_wrapper {
  width: 100%;
  height: 100%;
  max-height: 400px;
  display: flex;
  flex-direction: column;
  padding-left: 5%;
  overflow-y: auto;
  /* 启用垂直滚动 */
  -ms-overflow-style: none;
  /* 隐藏滚动条:IE 和 Edge 浏览器 */
  scrollbar-width: none;
  /* 隐藏滚动条:Firefox 浏览器 */
  /*gap:0.5%;*/
}

.counterBar_wrapper::-webkit-scrollbar {
  display: none;
  /* 隐藏滚动条 */
}

.text_right {
  /*告警分析字体*/
  color: rgba(255, 255, 255, 1);
  font-size: 16px;
  font-family: AlibabaPuHuiTi_2_65_Medium;
  text-align: center;
}

.alertTableWapper {
  width: 100%;
  height: 80%;
  padding-top: 0.5%;
}


/*表格配置相关*/
/*消除表格自适应宽度时候的动画*/
.alertTableWapper /deep/ .el-table {
  transition: none !important;
}

.alertTableWapper /deep/ .el-table__row,
.el-table__header,
.el-table__column {
  transition: none !important;
}

/* 最外层透明表格背景与白色字体 */
.alertTableWapper /deep/ .el-table,
.alertTableWapper /deep/ .el-table__expanded-cell {
  background-color: transparent;
  /* 设置透明背景 */
  color: white;
  /* 表格文字颜色 */
}

/*表头的背景图片样式*/
.alertTableWapper /deep/ .el-table__header{
  height:100%;
  background-size:cover;
}

/* 表格头部和单元格的背景颜色透明 */
.alertTableWapper /deep/ .el-table th,
.alertTableWapper /deep/ .el-table tr,
.alertTableWapper /deep/ .el-table td {
  background-color: transparent !important;
  /* 背景透明 */
  color: rgb(183, 179, 179);
  /* 确保文字为白色 */
}

/* 设置表格边框 */
.alertTableWapper /deep/ .el-table__body-wrapper {
  border: 0.5px solid transparent;
  /* 边框为白色 */
}

/* 如果表头或其他部分需要特殊透明处理 */
.alertTableWapper /deep/ .el-table__header-wrapper {
  background-color: rgba(255, 255, 255, 0.1);
  display: flex;
  height: 5%;
  align-items: center;
  /* 表头轻微透明 */
}

.alertTableWapper /deep/ .el-table .el-table__cell {
  padding: 0;
  height: 3rem;
 /* display: flex;
  justify-content: center;*/
}


.alertTableWapper /deep/ .el-pagination.is-background .el-pager li {
  background: transparent;
  color: #a09292;
}

.alertTableWapper /deep/ .el-pagination.is-background .btn-prev {
  background: transparent;
}

.alertTableWapper /deep/ .el-input__inner {
  background-color: transparent;
  color: #fff;
}

/*隐藏el-table的滚动条*/
/* 隐藏 el-table 的滚动条 */
.alertTableWapper /deep/ .el-table__body-wrapper {
  overflow: auto;
  /* 保持内容滚动 */
}

.alertTableWapper /deep/ .el-table__body-wrapper::-webkit-scrollbar {
  display: none;
  /* 隐藏滚动条 (Chrome/Safari) */
}

.alertTableWapper /deep/ .el-table__body-wrapper {
  scrollbar-width: none;
  /* 隐藏滚动条 (Firefox) */
}

/* pagenation */
.alertPagenation {
  margin-top: 1rem;
  float: right;
}


.viewButtonModule5 {
  /*查看按钮的样式*/
  background: transparent;
  /* 背景透明 */
  border: none;
  /* 去掉默认按钮边框 */
  color: #648bf4;
  /* 深蓝色字体 */
  font-size: 14px;
  /* 字体大小 */
  cursor: pointer;
  /* 鼠标悬停时显示手型 */
}


.viewButtonModule5:hover {
  text-decoration: underline;
  /* 悬停时下划线 */
}


/*新需求时间选择器相关*/
.time_block /deep/ .el-input__icon {
  display: none;
}

.time_block /deep/ .el-date-editor.el-input,
.el-date-editor.el-input__inner {
  display: flex;
  align-items: center; /*纵向居中*/
  justify-content: center;  /*横向居中*/
  height: 100%;
}

.time_block /deep/.el-date-editor el-input el-input--prefix el-input--suffix el-date-editor--datetime {
  display: flex;
  align-items: center;
  /*纵向居中*/
  justify-content: center;
    /*横向居中*/
  height:100%;
}

.time_block /deep/ .el-input__inner {
  background: transparent;
  
  /* 背景透明 */
  display: flex;
  align-items: center;
  text-align: center;
  width: 100%;
  height: 80%;
  /* 填满time_block容器 */
  border: none;
  /* 去掉边框 */
  border-radius: 4px;
  box-shadow: none;
  /* 去掉阴影 */
  padding: 0;
  /* 去除内边距 */
  color: #ffffff;
  font-size: 14px;
  font-family: AlibabaPuHuiTi_2_65_Medium;
  background-image: url("@/assets/img/module5/alert/alert_label.png");
  background-repeat: no-repeat;
  background-size: cover; 
}



</style>

<!-- 面板背景颜色相关配置要另起一个style，不能放在scoped下，会不起效 -->
<style lang="css">
/*时间选择器面板颜色相关*/
/*主框背景颜色*/
.selectDown {
  background: #0a1b28 !important;  
}

.selectDown .el-date-picker__header-label{
  color: #ffffff !important;   /*日历header文字颜色*/
}

.selectDown .el-date-table td.next-month,
.el-date-table td.prev-month{  /*上个月和下个月日期字体颜色*/
  color:#606266 !important;
}

 /*当月字体颜色*/
.selectDown.el-picker-panel{
  color: #ffffff !important;
} 

/*星期文字颜色*/
th{
  color:#ffffff !important;  
}

/*切换年月日箭头颜色*/
.selectDown .el-picker-panel__icon-btn{
  color: #ffffff !important;
} 

/*input框背景*/
.selectDown .el-input__inner {
  background: #0a1b28 !important;
  color: #ffffff !important;
}

/*主框底部背景*/
.selectDown .el-picker-panel__footer {
  background: #0a1b28 !important;
}

/*确定按钮样式*/
.selectDown .el-button--mini {
  background: transparent !important;
  color: #ffffff !important;
  border: none;
}


.selectDown .el-button--text{   /*主面板按钮颜色*/
  color: #409EFF !important; 
}

/*时分秒选择器相关*/
.selectDown .el-time-panel {
  background-color: #0a1b28 !important;  /*整体背景颜色*/
}

/*时分秒字体颜色*/
.selectDown .el-time-spinner__item {
  color: #ffffff !important;
}

.selectDown .el-time-spinner__item:hover:not(.disabled):not(.active) {
  color: #2e4151 !important;
}

.selectDown .el-time-panel__btn {
  /*时分秒选择器的取消按钮*/
  color: #ffffff;
}

/*新需求时间选择器相关*/
</style>